import 'package:flutter/material.dart';

class MyApp17 extends StatelessWidget {
  const MyApp17({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //导航条
        appBar: AppBar(
          title: const Text('GrinView组件',
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.white)),
          backgroundColor: Colors.pink,
          centerTitle: true,
        ),
        //主体区域
        //侧轴方向上的个数是固定的（无论是否旋转屏幕）
        body: GridView(
          //视图代理
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              //设置侧轴个数
              crossAxisCount: 3,
              //设置主轴方向上的间距
              mainAxisSpacing: 10,
              //设置侧轴方向上的间距
              crossAxisSpacing: 20,
              //设置宽高比
              childAspectRatio: 2 / 1),
          children: [
            Container(
              color: Colors.green,
              alignment: Alignment.center,
              child: const Text('黑马程序员1'),
            ),
            Container(
              color: Colors.pink,
              alignment: Alignment.center,
              child: const Text('黑马程序员2'),
            ),
            Container(
              color: Colors.blue,
              alignment: Alignment.center,
              child: const Text('黑马程序员3'),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: const Text('黑马程序员4'),
            ),
            Container(
              color: Colors.cyan,
              alignment: Alignment.center,
              child: const Text('黑马程序员5'),
            ),
            Container(
              color: Colors.green,
              alignment: Alignment.center,
              child: const Text('黑马程序员6'),
            )
          ],
        ));
  }
}
